import React, {PureComponent} from "react";
import {connect} from "react-redux";
import {Button, Icon, Popconfirm, Table, Upload} from "antd";
import {tableProps} from "../../lib/ui";
import {
    getBusinessList,
    getCurrencyList,
    getFeeList,
    getTransportType,
    lineImportInCreateModal,
    showCreateLinePrice,
    showUpdateLinePrice,
    updateLinePriceInCreateModel
} from "./actions";
import CreateLinePriceModal from "./CreateLinePriceModal";
import ModifyLinePriceModal from "./ModifyLinePriceModal";
import {getStatusText} from "../../lib/func";
import {query as lineQuery} from "../line/actions";

class LinePriceInCreateModal extends PureComponent {

    handleShowCreate = () => {
        const {dispatch} = this.props;
        dispatch(showCreateLinePrice());
        dispatch(getTransportType());
        dispatch(getCurrencyList());
        dispatch(getBusinessList());
        dispatch(getFeeList());
        dispatch(lineQuery({}));
    };
    handleUpdate = record => {
        const {dispatch} = this.props;
        dispatch(showUpdateLinePrice(record));
        dispatch(getTransportType());
        dispatch(getCurrencyList());
        dispatch(getBusinessList());
        dispatch(lineQuery({}));
    };
    handleDeleteLinePrice = id => {
        const {dispatch, dataSource} = this.props;
        let deleteIndex = dataSource.findIndex(item => item.id === id);
        dataSource.splice(deleteIndex, 1);
        dispatch(updateLinePriceInCreateModel(dataSource));
    };


    customRequest = (options) => {
        const {dispatch} = this.props;
        dispatch(lineImportInCreateModal({
            file: options.file
        }))
    };
    uploadProps = {
        showUploadList: false,
        name: 'file',
        accept: '.xls, .xlsx, .csv',
        customRequest: this.customRequest
    };


    render() {
        const {
            dataSource, loading, importLoading,
            calculateType
        } = this.props;
        const columns = [
            {
                title: "业务类型",
                dataIndex: "businessType",
                width: "150px",
            }, {
                title: "单位",
                dataIndex: "unit",
                width: "80px",
            }, {
                title: "起始站",
                dataIndex: "originPlace",
                width: "150px",
            }, {
                title: "目的站",
                dataIndex: "destPlace",
                width: "150px",
            }, {
                title: "出境口岸",
                dataIndex: "departurePort",
                width: "150px",
            }, {
                title: "费用名称",
                dataIndex: "feeName",
                width: "150px",
            }, {
                title: "费用性质",
                dataIndex: "feeType",
                width: "150px",
            }, {
                title: "币种",
                dataIndex: "currency",
                width: "150px",
            }, {
                title: "单价/KG",
                dataIndex: "price",
                width: "150px",
            }, {
                title: "单价/CBM",
                dataIndex: "price2",
                width: "150px",
            }, {
                title: "重泡比",
                dataIndex: "pb",
                width: "90px",
                render: (text) => ("1:" + text)
            }, {
                title: "计费方式",
                dataIndex: "calculateType",
                width: "150px",
                render: (text) => getStatusText(text, calculateType)
            }, {
                title: "有效期",
                dataIndex: "expirationDate",
                width: "200px",
                render: (text, record) => <span>
                    {record.startDate} 至 {record.endDate}
                </span>
            }, {
                title: "所属抬头",
                dataIndex: "organizationName",
                width: "150px",
            }, {
                title: "创建人",
                dataIndex: "opName",
                width: "150px",
            }, {
                title: "备注",
                dataIndex: "remark",
                width: "200px",
                ellipsis: true
            }
            , {
                title: '功能',
                dataIndex: '',
                key: 'x',
                width: 80,
                align: 'center',
                fixed: 'right',
                render: (text, record) => <span>
                    <Popconfirm title="确定移除此线路价格?" okText="是" cancelText="否"
                                onConfirm={() => this.handleDeleteLinePrice(record.id)}>
                        <Icon type="delete"/>
                    </Popconfirm>
                </span>
            }
        ];

        return (

            <div>
                <div className="actions">
                    <Button onClick={() => this.handleShowCreate()}>新增</Button>
                    <Button href="/static/线路导入模板.xlsx" target="_blank">下载导入模板</Button>
                    <Upload {...this.uploadProps}>
                        <Button disabled={importLoading}>
                            <Icon type="upload"/> 导入
                        </Button>
                    </Upload>
                </div>
                <h3 style={{color: 'red'}}>计费规则：根据订单相同业务类型、计费方式、起始站、目的站、费用名称，并且在有效期范围内才符合计费规则（注意：国际版列按照班列日期，综合物流按照订单创建时间来判断是否符合线路有效期）</h3>
                <Table
                    {...tableProps}
                    columns={columns}
                    scroll={{x: 1500}}
                    dataSource={dataSource}
                    loading={loading}
                />
                <CreateLinePriceModal modelId={undefined}/>
                <ModifyLinePriceModal/>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        ...state.carrier.importLinePriceInCreateModal
    };
};

export default connect(mapStateToProps)(LinePriceInCreateModal);
